<template>
	<view class="mine" v-if="user">
		<view class="user-header">
			<image src="/static/images/drink-header.png" mode="" class="background-img"></image>
			<view class="section">
				<view class="section-top">
					<view class="section-one">
						
						<view class="user-img-box">
							<image :src="user.avatar_url" mode="" class="user-img"></image>
						</view>
					</view>
					<view class="section-two" v-if="user.vip_expired_at">
						<!-- <view v-if="user.vip.ex"></view> -->
						<view class="user-name">{{ user.name }}</view>
						<view class="user-vip-expired">{{ user.vip_expired_at }}</view>
						
					</view>
					<view class="section-two-no" v-else>
						<view class="user-name">{{ user.name }}</view>
					</view>
					<view class="section-three">
						<image src="/static/images/video-icon.png" mode="" class="video-icon"></image>
						<view class="drink-produce">畅饮介绍</view>
					</view>
				</view>
				
				<view class="section-bottom">
					<view class="all-img">
						<image src="/static/images/drink-solgon.png" mode="" class="drink-solgon"></image>
						<image src="/static/images/drink-wine.png" mode="" class="drink-wine"></image>
					</view>
					<view class="little-desc">
						<view class="no-text">暂未开通无限畅饮</view>
						<view class='open-drink'  @click="goToVip()">开通立享无限畅饮</view>
					</view>
					
				</view>
			</view>
			
			
		</view>
		<view class="products"  >
			<view class="product-item" v-for="(product, index) in products" :key="index">
				<image :src="product.cover_url" mode=""></image>
				<view class="product-title">{{product.title}}</view>
				<view class="product-desc">
					<view>热-CLUB</view>
					<view>￥{{product.price_lowest}}</view>
				</view>
				<view class="drink-btn" @click="goToProduct(product.id)">提货</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import store from "store"
	import { mapMutations,mapGetters } from 'vuex'
	import Skeleton from "mixins/Skeleton"
	import AuthChecking from "mixins/AuthChecking"
	import SkeletonMineCom from "skeletons/SkeletonMineCom"
	import { drinkGetProducts } from "api/productApi"
	import { getUser } from "api/userApi"
	export default {
		store,
		mixins: [
			Skeleton,
			AuthChecking
		],
		computed:{
			...mapGetters([
				'user',
				'isLogin'
			])
		},
		components: {
			SkeletonMineCom
		},
		data() {
			return {
				estimateData:null,
				counts:null,
				downPopShow:false,
				shopingMoneyShow:false,
				products:[]
			}
		},
		methods: {
			...mapMutations(['setUser']),
			goToVip() {
			  uni.navigateTo({url: `/packs/pages/drink/vip`})
			},
			goToProduct(id) {
			  uni.navigateTo({url: `/packs/pages/product/show?product_id=${id}&isTake=1`})
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async getProducts() {
				const response = await drinkGetProducts()
				
				this.products = response.data
				
			}
		},
		async onShow() {
			if(await this.isLogin){
				await this.getUser()
				await this.getProducts()
			}
			uni.setStorage({
				 key:"newsTop",
				 data:0
			})
		},
		onLoad() {
			/* if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
			} */
		}
	}
</script>

<style lang="scss" scoped >
	page{
		background: #F6F6F6;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		position: fixed;
		left:0;
		top:0;
	}
	.user-header{
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:0 auto ;
		postion:relative;
		.background-img{
			width:100%;
			height:670rpx;
			
		}
	}
	.section{
		position:absolute;
		top:188rpx;
		width:100%;
	}
	.section-one{
		align-items: center;
		justify-content: space-between;
		float:left;
		
	}
	.user-img-box{
		width: 116rpx;
		height: 116rpx;
		position: relative;
		margin-left: 16rpx;
	}
	.user-img{
		display: block;
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
	} 
	
	.section-top{
		overflow:hidden;
		color:#fff;
	}
	.section-two-no{
		float:left;
		align-items: center;
		margin-top: 16rpx;
		margin-left: 18rpx;
		color:#fff;
		.user-name{
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #fff;
			margin-top:22rpx;
			
		}
	}
	.section-two{
		float:left;
		align-items: center;
		margin-top: 16rpx;
		margin-left: 18rpx;
		color:#fff;
		.user-name{
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #fff;
			
		}
		.user-vip-expired{
			font-size: 26rpx;	
		}
	}
	.section-three{
		float:right;
		color:#fff;
		margin-right:30rpx;
		margin-top:38rpx;
		overflow:hidden;
		>image{
			width:32rpx;
			height:20rpx;
			float:left;
			margin-right:6rpx;
			margin-top:6rpx;
		}
		>view{
			float:left;
			font-size:24rpx;
		}
	}
	.section-bottom{
		width:718rpx;
		height:374rpx;
		border-radius:20rpx;
		margin:30rpx auto 0rpx;
		background:linear-gradient(#F5D8BE,#FDF9F0,#CFA785);
		.all-img{
			display:flex;
			.drink-solgon{
				width:354rpx;
				height:84rpx;
				margin:140rpx 40rpx 0rpx 30rpx;
			}
			.drink-wine{
				width:266rpx;
				height:272rpx;
				margin-top:16rpx;
			}
		}
		.little-desc{
			margin-top:12rpx;
			overflow:hidden;
			.no-text{
				
				font-size:24rpx;
				margin-top:14rpx;
				color:#2C1C11;
				float:left;
				margin-left:70rpx;
			}
			.open-drink{
				
				float:right;
				margin-right:30rpx;
				width:292rpx;
				height:60rpx;
				background:#333;
				color:#fff;
				font-size:26rpx;
				border-radius:46rpx;
				line-height:60rpx;
				text-align:center;
			}
		}
	}
	.products{
		margin-top:70rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width:718rpx;
		margin:54rpx auto 0rpx;
		.product-item{
			width:350rpx;
			height:520rpx;
			background:#fff;
			margin-top:16rpx;
			text-align:center;
			>image{
				width:292rpx;
				height:292rpx;
				margin-top:16rpx;
			}
			.product-title{
				text-align:left;
				width:326rpx;
				font-size:24rpx;
				color:#333;
				margin:22rpx auto 0rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow:hidden;
			}
			.product-desc{
				margin-top:24rpx;
				overflow:hidden;
				>view:nth-child(1){
					background:#D84C29;
					color:#fff;
					font-size:22rpx;
					float:left;
					margin-left:12rpx;
					width:106rpx;
					height:36rpx;
					lien-height:36rpx;
					text-align:center;
					
				}
				>view:nth-child(2){
					font-size:26rpx;
					color:#333;
					float:left;
					margin-left:12rpx;
					
				}
				
			}
			.drink-btn{
				margin:22rpx auto 0rpx;
				width:270rpx;
				height:58rpx;
				color:#fff;
				background:#333;
				font-size:28rpx;
				line-height:58rpx;
				text-align:center;
			}
		}
	}

</style>
